<template>
  <div class="left">
    <el-card shadow="hover">
      <template #header>
        <h2>关键词搜索</h2>
      </template>
      <template #default>
        <!-- 主题 -->
        <div class="main">
          <!-- 图表 -->
          <div class="charts">
            <div class="LeftChart">
              <div class="title">搜索用户量</div>
              <div class="number">{{ userNum }}</div>
              <v-chart :option="userOption"></v-chart>
            </div>
            <div class="RightChart">
              <div class="title">搜索量</div>
              <div class="number">{{ searchNum }}</div>
              <v-chart :option="searchOption"></v-chart>
            </div>
          </div>
          <!-- 表格 -->
          <div class="table">
            <el-table :data="pageData">
              <el-table-column label="排名" prop="rank"></el-table-column>
              <el-table-column label="关键词" prop="keyWord"></el-table-column>
              <el-table-column
                label="总搜索量"
                prop="totalSearch"></el-table-column>
              <el-table-column
                label="搜索用户数"
                prop="totalUser"></el-table-column>
            </el-table>
          </div>
          <!-- 分页器 -->
          <div class="pagination">
            <el-pagination
              layout="prev,pager,next"
              :total="tableData.length"
              :page-size="6"
              @current-change="page = $event"></el-pagination>
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { getKeyworddata } from '@/api'
const tableData = ref([])
const userOption = ref({})
const searchOption = ref({})
const page = ref(1) // 报错当前页码数
const pageData = computed(() => {
  const start = (page.value - 1) * 6
  const end = page.value * 6

  return tableData.value.slice(start, end)
})
const userNum = computed(() => {
  return tableData.value.reduce((acc, cur) => acc + cur.totalUser, 0)
})
const searchNum = computed(() => {
  return tableData.value.reduce((acc, cur) => acc + cur.totalSearch, 0)
})
const renderLineChart = (chartOption, data) => {
  chartOption.value = {
    xAxis: {
      type: 'category',
      show: false,
      boundaryGap: false,
    },
    yAxis: {
      type: 'value',
      show: false,
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
    series: {
      type: 'line',
      data: data,
      areaStyle: {
        color: 'skyblue',
      },
      itemStyle: {
        opacity: 0,
      },
      smooth: true,
    },
  }
}

onMounted(async () => {
  tableData.value = await getKeyworddata()

  const userData = tableData.value
    .map((item) => item.totalUser)
    .slice(0, 10)
    .sort((a, b) => a - b)
  const searchData = tableData.value
    .map((item) => item.totalSearch)
    .slice(0, 10)
    .sort((a, b) => a - b)
  renderLineChart(userOption, userData)
  renderLineChart(searchOption, searchData)
})
</script>
<style scoped>
.left {
  flex: 1;
  h2 {
    font-weight: 600;
  }
  .main {
    padding: 20px;
    .charts {
      display: flex;
      gap: 20px;
      .LeftChart,
      .RightChart {
        flex: 1;
        .title {
          font-size: 14px;
          color: #727171;
        }
        .number {
          margin-top: 10px;
          font-size: 20px;
          font-weight: 600;
        }
        .echarts {
          height: 50px;
        }
      }
    }
  }
  .table {
    .el-pagination {
      margin-top: 20px;
      text-align: left;
    }
  }
}
</style>
